import deepcopy from "deepcopy";
import { defineComponent, inject, ref } from "vue";

export default defineComponent({
  props: {
    modelValue: Array,
  },
  emits: ["update:modelValue"],
  setup(props, ctx) {
    const config = inject("configList");
    // const list = ref([]);

    let randomId = Math.random().toString(36).substr(2);

    if (props.modelValue.length == 0) {
      props.modelValue.push({
        label: "选项1", //row label
        value: randomId + "1", //唯一标识
      });
      props.modelValue.push({
        label: "选项2", //row label
        value: randomId + "2", //唯一标识
      });
    }

    console.log("打印option:", props.modelValue);

    const addLine = (index) => {
      let randomId = Math.random().toString(36).substr(2);
      props.modelValue.push({
        label: "选项" + (index + 2).toString(), //row label
        value: randomId + (index + 2).toString(), //唯一标识
      });
    };

    const removeItem = (index) => {
      if (props.modelValue.length <= 1) {
        ElMessage.error("至少保留一项");
        return;
      }
      props.modelValue.splice(index, 1);
    };

    return () => {
      return props.modelValue.map((item, index) => {
        return (
          <>
            <div
              style={{ width: "100%", display: "flex", alignItems: "center" }}
            >
              <ElInput
                style={{ flex: 1 }}
                v-model={item.label}
                clearable
                maxlength={6}
              ></ElInput>
              {/* todo 拖拽待实现 */}
              {/* <Rank
                style={{
                  width: "1em",
                  height: "100%",
                  margin: "0 8px",
                  cursor: "pointer",
                  border: "1px solid var(--divider-color)",
                }}
              ></Rank> */}
              <Delete
                class="table-delete"
                onClick={() => {
                  removeItem(index);
                }}
              ></Delete>
            </div>
            {/*todo 优化hover */}
            {index == props.modelValue.length - 1 && (
              <div
                onClick={() => {
                  addLine(index);
                }}
                className="table-right"
                style={{ color: "var(--primary-main-color)" }}
              >
                添加行
              </div>
            )}
          </>
        );
      });
    };
  },
});
